<app-header>
  <div class="left">
    <app-pop-out></app-pop-out>
  </div>
  <h1 class="center">
    <span class="title">{{ "settings" | i18n }}</span>
  </h1>
  <div class="right"></div>
</app-header>
<main tabindex="-1" [formGroup]="form">
  <div class="box list">
    <h2 class="box-header">{{ "manage" | i18n }}</h2>
    <div class="box-content single-line">
      <button
        type="button"
        class="box-content-row box-content-row-flex text-default"
        routerLink="/autofill"
      >
        <div class="row-main">{{ "autofill" | i18n }}</div>
        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
      </button>
      <button
        type="button"
        class="box-content-row box-content-row-flex text-default"
        routerLink="/folders"
      >
        <div class="row-main">{{ "folders" | i18n }}</div>
        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
      </button>
      <button
        type="button"
        class="box-content-row box-content-row-flex text-default"
        routerLink="/sync"
      >
        <div class="row-main">{{ "sync" | i18n }}</div>
        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
      </button>
      <button
        type="button"
        class="box-content-row box-content-row-flex text-default"
        routerLink="/excluded-domains"
      >
        <div class="row-main">{{ "excludedDomains" | i18n }}</div>
        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
      </button>
    </div>
  </div>
  <div class="box list">
    <h2 class="box-header">{{ "security" | i18n }}</h2>
    <div class="box-content single-line">
      <app-callout type="info" *ngIf="vaultTimeoutPolicyCallout | async as policy">
        <span *ngIf="policy.timeout && policy.action">
          {{
            "vaultTimeoutPolicyWithActionInEffect"
              | i18n: policy.timeout.hours : policy.timeout.minutes : (policy.action | i18n)
          }}
        </span>
        <span *ngIf="policy.timeout && !policy.action">
          {{ "vaultTimeoutPolicyInEffect" | i18n: policy.timeout.hours : policy.timeout.minutes }}
        </span>
        <span *ngIf="!policy.timeout && policy.action">
          {{ "vaultTimeoutActionPolicyInEffect" | i18n: (policy.action | i18n) }}
        </span>
      </app-callout>
      <app-vault-timeout-input
        [vaultTimeoutOptions]="vaultTimeoutOptions"
        [formControl]="form.controls.vaultTimeout"
        ngDefaultControl
      >
      </app-vault-timeout-input>
      <div class="box-content-row display-block" appBoxRow>
        <label for="vaultTimeoutAction">{{ "vaultTimeoutAction" | i18n }}</label>
        <select
          id="vaultTimeoutAction"
          name="VaultTimeoutActions"
          formControlName="vaultTimeoutAction"
        >
          <option *ngFor="let action of availableVaultTimeoutActions" [ngValue]="action">
            {{ action | i18n }}
          </option>
        </select>
      </div>
      <div
        *ngIf="!availableVaultTimeoutActions.includes(VaultTimeoutAction.Lock)"
        id="unlockMethodHelp"
        class="box-footer"
      >
        {{ "unlockMethodNeededToChangeTimeoutActionDesc" | i18n }}
      </div>
      <div class="box-content-row box-content-row-checkbox" appBoxRow>
        <label for="pin">{{ "unlockWithPin" | i18n }}</label>
        <input id="pin" type="checkbox" formControlName="pin" />
      </div>
      <div class="box-content-row box-content-row-checkbox" appBoxRow *ngIf="supportsBiometric">
        <label for="biometric">{{ "unlockWithBiometrics" | i18n }}</label>
        <input id="biometric" type="checkbox" formControlName="biometric" />
      </div>
      <div
        class="box-content-row box-content-row-checkbox"
        appBoxRow
        *ngIf="supportsBiometric && this.form.value.biometric"
      >
        <label for="autoBiometricsPrompt">{{ "enableAutoBiometricsPrompt" | i18n }}</label>
        <input
          id="autoBiometricsPrompt"
          type="checkbox"
          (change)="updateAutoBiometricsPrompt()"
          formControlName="enableAutoBiometricsPrompt"
        />
      </div>
      <button
        *ngIf="
          !accountSwitcherEnabled && availableVaultTimeoutActions.includes(VaultTimeoutAction.Lock)
        "
        type="button"
        class="box-content-row box-content-row-flex text-default"
        appStopClick
        (click)="lock()"
      >
        <div class="row-main">{{ "lockNow" | i18n }}</div>
        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
      </button>
      <button
        type="button"
        class="box-content-row box-content-row-flex text-default"
        appStopClick
        (click)="twoStep()"
      >
        <div class="row-main">{{ "twoStepLogin" | i18n }}</div>
        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
      </button>
    </div>
  </div>
  <div class="box list">
    <h2 class="box-header">{{ "account" | i18n }}</h2>
    <div class="box-content single-line">
      <button type="button" class="box-content-row" routerLink="/premium">
        <div class="row-main">
          <div class="icon text-primary">
            <i class="bwi bwi-fw bwi-lg bwi-star-f" aria-hidden="true"></i>
          </div>
          <span class="text text-primary"
            ><b>{{ "premiumMembership" | i18n }}</b></span
          >
        </div>
        <span><i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i></span>
      </button>
      <button
        type="button"
        class="box-content-row box-content-row-flex text-default"
        appStopClick
        (click)="changePassword()"
        *ngIf="showChangeMasterPass"
      >
        <div class="row-main">{{ "changeMasterPassword" | i18n }}</div>
        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
      </button>
      <button
        type="button"
        class="box-content-row box-content-row-flex text-default"
        appStopClick
        (click)="fingerprint()"
      >
        <div class="row-main">{{ "fingerprintPhrase" | i18n }}</div>
        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
      </button>
      <button
        *ngIf="!accountSwitcherEnabled"
        type="button"
        class="box-content-row box-content-row-flex text-default"
        appStopClick
        (click)="logOut()"
      >
        <div class="row-main">{{ "logOut" | i18n }}</div>
        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
      </button>
    </div>
  </div>
  <div class="box list">
    <h2 class="box-header">{{ "tools" | i18n }}</h2>
    <div class="box-content single-line">
      <button
        type="button"
        class="box-content-row box-content-row-flex text-default"
        appStopClick
        (click)="import()"
      >
        <div class="row-main">{{ "importItems" | i18n }}</div>
        <i
          class="bwi bwi-external-link bwi-lg row-sub-icon bwi-rotate-270 bwi-fw"
          aria-hidden="true"
        ></i>
      </button>
      <button
        type="button"
        class="box-content-row box-content-row-flex text-default"
        appStopClick
        (click)="export()"
      >
        <div class="row-main">{{ "exportVault" | i18n }}</div>
        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
      </button>
      <button
        type="button"
        class="box-content-row box-content-row-flex text-default"
        appStopClick
        (click)="webVault()"
      >
        <div class="row-main">{{ "bitWebVault" | i18n }}</div>
        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
      </button>
    </div>
  </div>
  <div class="box list">
    <h2 class="box-header">{{ "other" | i18n }}</h2>
    <div class="box-content single-line">
      <button
        type="button"
        class="box-content-row box-content-row-flex text-default"
        routerLink="/options"
      >
        <div class="row-main">{{ "options" | i18n }}</div>
        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
      </button>
      <button
        type="button"
        class="box-content-row box-content-row-flex text-default"
        appStopClick
        (click)="about()"
      >
        <div class="row-main">{{ "about" | i18n }}</div>
        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
      </button>
      <button
        type="button"
        class="box-content-row box-content-row-flex text-default"
        appStopClick
        (click)="share()"
      >
        <div class="row-main">{{ "learnOrg" | i18n }}</div>
        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
      </button>
      <button
        type="button"
        class="box-content-row box-content-row-flex text-default"
        routerLink="/help-and-feedback"
      >
        <div class="row-main">{{ "helpFeedback" | i18n }}</div>
        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
      </button>
      <button
        type="button"
        aria-describedby="rateExtensionHelp"
        class="box-content-row box-content-row-flex text-default"
        appStopClick
        (click)="rate()"
      >
        <div class="row-main">{{ "rateExtension" | i18n }}</div>
        <i class="bwi bwi-angle-right bwi-lg row-sub-icon" aria-hidden="true"></i>
      </button>
    </div>
    <div id="rateExtensionHelp" class="box-footer">{{ "rateExtensionDesc" | i18n }}</div>
  </div>
</main>
